<template>
    <div class="nav-bottom" v-show=$route.meta.isShow>
        <div class="nav" v-for="(item,index) in items" :key="index" @click="onClick(item)"
            :class="{color:indexs==item.path}">
            <i class="iconfont" :class="item.icon"></i><br>
            {{item.title}}
            <span v-if="index==2" class="num">0</span>
        </div>
    </div>
</template>

<script>
    export default {
        data() {
            return {
                indexs: document.location.pathname
            }
        },
        props: {
            items: {
                type: Array,
                repuierd: true,
                validator: function (value) {
                    return value.length <= 6
                }
            }
        },
        methods: {
            onClick(path) {
                this.$router.push(path)
                this.indexs = path.path
                // console.log(this.indexs)
            }
        }
    }
</script>

<style lang='scss' scoped>
    .nav-bottom {
        text-align: center;
        box-sizing: border-box;
        width: 100%;
        height: 10vh;
        position: fixed;
        bottom: 0px;
        left: 0px;
        display: flex;
        justify-content: space-around;
        align-items: center;
        background-color: rgb(243, 243, 243);
        .color {
            color: red;
        }

        .nav {
            position: relative;
            font-size: 0.34rem;
            .num {
                display: inline-block;
                width: 0.3rem;
                height: 0.3rem;
                background: red;
                border-radius: 50%;
                position: absolute;
                top: 0px;
                right: 0px;
                color: white;
                text-align: center;
                line-height: 0.3rem;
            }
        }
    }
    .iconfont{
        font-size: 0.6rem;
    }
   
</style>